<template>
  <div>
    <el-input v-model="searchQuery" style="width: 240px" placeholder="请输入咖啡名称" @clear="clearSearch" @input="handleInput"
      :suffix-icon="SearchIcon" />
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue';
export default {
  data() {
    return {
      searchQuery: '',
      SearchIcon: Search,
    };
  },
  methods: {
    handleInput() {
      const trimmedQuery = this.searchQuery.trim();
      if (trimmedQuery) {
        this.$router.push({ path: `/search/${encodeURIComponent(trimmedQuery)}` });
      } else {
        this.$router.push({ path: '/' }); 
      }
    },
    clearSearch() {
      this.searchQuery = '';
      this.$router.push({ path: '/' }); 
    },
  },
};
</script>